<template>
	<view class="userLayout pageBg">
		<view class="logined" v-if="login">
			<view class="userInfo">
				<view class="avatar">
					<image src="../../static/image/user/user.jpg" mode="aspectFill"></image>
				</view>
				<view class="username">小小白杨</view>
				<view class="userid">1004258279</view>
				<view class="address">湖南</view>
			</view>
			<view class="user-stats">
				<view class="stat-publish">
					<view class="count">389</view>
					<view class="label">发布</view>
				</view>
				<view class="stat-subscribe">
					<view class="count">15</view>
					<view class="label">关注</view>
				</view>
				<view class="stat-fans">
					<view class="count">7</view>
					<view class="label">粉丝</view>
				</view>
			</view>

			<view class="service">
				<view class="service-tltle">推荐服务</view>
				<view class="service-content">
					<navigator url="/pages/KitchenView/KitchenView" class="service-item">
						<uni-icons type="home" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">智能厨房</view>
					</navigator>
					<navigator url="/pages/DietManagement/DietManagement" class="service-item">
						<uni-icons type="calendar" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">饮食管理</view>
					</navigator>
					<view class="service-item">
						<uni-icons type="color" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">创意菜谱</view>
					</view>
					<view class="service-item">
						<uni-icons type="shop" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">网上超市</view>
					</view>
					<navigator url="/pages/MapView/MapView" class="service-item">
						<uni-icons type="map" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">附近美食</view>
					</navigator>
					<view class="service-item">
						<uni-icons type="vip" size="30" color="#FF4D4F"></uni-icons>
						<view class="service-item-label">会员特权</view>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="list">
					<view class="row">
						<view class="left">
							<uni-icons type="star-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">我的收藏</view>
						</view>
						<view class="right">
							<view class="text">33</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row">
						<view class="left">
							<uni-icons type="eye-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">浏览记录</view>
						</view>
						<view class="right">
							<view class="text">33</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row">
						<view class="left">
							<uni-icons type="staff-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">个人信息</view>
						</view>
						<view class="right">
							<view class="text">33</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row">
						<view class="left">
							<uni-icons type="chatboxes-filled" size="25" color="#FF4D4F"></uni-icons>
							<view class="text">联系客服</view>
						</view>
						<view class="right">
							<view class="text">33</view>
							<uni-icons type="right" size="20" color="#aaa"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="buttonbox">
				<button type="primary" class="primary-button" @click="logout">退出登录</button>
			</view>
		</view>
		<view class="unlogin" v-else>
			<view class="userInfo">
				<view class="avatar">
					<image src="../../static/image/user/user.jpg" mode="aspectFill"></image>
				</view>
				<view class="username">未登录</view>
			</view>
			<view class="buttonbox">
				<button type="primary" class="primary-button" @click="login_test">登录</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { appUrl } from '../../main';
	const login = ref(false)
	const user = ref({
		userId: 0,
		username: "",
		phone: "",
		password: "",
		createdAt: "",
		updatedAt: "",
		profilePicture: "",
		bio: "",
		preference: "",
		vcode: ""
	})
	
	
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '要退出登录吗',
			confirmColor: "#FF4D4F",
			success: function(res) {
				if (res.confirm) {
					console.log('用户退出登录');
					uni.removeStorageSync("token")
					uni.removeStorageSync("userId")
					uni.removeStorageSync("phone")
					login.value = false
					uni.showToast({
						title: '成功退出',
						duration: 1000
					});
					uni.pageScrollTo({
					    scrollTop: 0, // 滚动到页面顶部
					    duration: 100  // 动画持续时间，单位为ms
					  });
				}
			}
		})
	}

	const login_test = () => {
		uni.navigateTo({
			url:"/pages/LoginView/LoginView"
		})
	}
	//钩子
	onMounted(()=>{
		const token = uni.getStorageSync("token")
		if(token !== null &&  token !== ""){
			uni.request({
				url: appUrl+'/users/getUser',
				header: {
				    'token': token //自定义请求头信息
				},
				method: "get"
			}).then(res=>{
				user.value = res.data.data
				uni.setStorageSync("userId", res.data.data.userId)
				uni.setStorageSync("phone", res.data.data.phone)
				login.value = true
			})
			.catch(error => {
				uni.showToast({
					icon:'error',
					title: '用户登录过期'
				})
			});
			
		}
	})
</script>

<style lang="scss" scoped>
.userLayout{
	height: 120vh;
	.userInfo {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 200rpx 50rpx 100rpx 50rpx;
	
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.username {
			font-size: 44rpx;
			color: #333;
		}
	
		.userid {
			font-size: 28rpx;
			color: #999;
		}
	
		.address {
			font-size: 28rpx;
			color: #aaa;
		}
	}
	
	.user-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10rpx;
		padding: 30rpx;
	
		.stat-publish {
			text-align: center;
	
			.count {
				font-size: 20px;
				color: #333;
			}
	
			.label {
				font-size: 14x;
				color: #666;
				margin-top: 5px;
			}
		}
	
		.stat-subscribe {
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			text-align: center;
	
			.count {
				font-size: 20px;
				color: #333;
			}
	
			.label {
				font-size: 14px;
				color: #666;
				margin-top: 5px;
			}
		}
	
		.stat-fans {
			text-align: center;
	
			.count {
				font-size: 20px;
				color: #333;
			}
	
			.label {
				font-size: 14px;
				color: #666;
				margin-top: 5rpx;
			}
		}
	}
	
	.service {
		width: 690rpx;
		margin: 50rpx auto;
		
		.service-tltle {
			font-size: 16px;
		}
		
		.service-content {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 10rpx;
			padding-top: 40rpx;
			row-gap: 40rpx;
			
			.service-item {
				text-align: center;
				
				.service-item-label {
					font-size: 12px;
					color: #666;
					margin-top: 5rpx;
				}
			}
		}
	}
	
	.section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
	
		.list {
			.row {
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				height: 100rpx;
				border-bottom: 1px solid #eee;
	
				&:last-child {
					border-bottom: 0;
				}
	
				.right {
					display: flex;
					align-items: center;
	
					.text {
						font-size: 28rpx;
						color: #aaa;
					}
				}
	
				.left {
					display: flex;
					align-items: center;
	
					.text {
						padding-left: 20rpx;
						color: #666;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	
	.buttonbox {
		width: 690rpx;
		margin: 50rpx auto;
	
		button {
			height: 80rpx;
			margin: 20rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.primary-button {
			background-color: #FF4D4F;
		}
	
		.plain-button {
			color: #FF4D4F;
			border: 1px solid #FF4D4F;
		}
	
	
	}
}
	
</style>